<template>
	<view>
		<!-- 日期选择 -->
		<uni-popup ref="popup" type="bottom">
			<view class="time_warp">
				<view class="top row_center">
					<view class="cancel" @click="close">
						取消
					</view>
					<view class="title">
						{{popTitle}}
					</view>
					<view class="confirm" @click="confirm">
						保存
					</view>
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" indicator-class="picker_com"
					mask-class="mask_com" :value="value" @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" :class="chekcVal[0] == index ? 'pickerSelected' : ''" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="chekcVal[1] == index ? 'pickerSelected' : ''" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" :class="chekcVal[2] == index ? 'pickerSelected' : ''" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "com-picker-time",
		props: {
			popTitle: {
				type: String,
				default: '修改日期'
			},
			startDate: {
				type: String,
				default: ''
			}
		},
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			let yearVal = 0;
			for (let i = 1970; i <= date.getFullYear(); i++) {
				yearVal += 1
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 80rpx;`,
				chekcVal: [yearVal - 1, month - 1, day - 1],
			}
		},
		mounted() {
			if(this.startDate != '') {
				let startDate = new Date(Number(this.startDate));
				console.log(startDate)
				let yearVal = 0;
				for (let i = 1970; i <= startDate.getFullYear(); i++) {
					yearVal += 1
				}
				let month_d = startDate.getMonth() + 1
				let day_d = startDate.getDate()
				this.value = [yearVal -1, month_d-1, day_d-1];
				this.chekcVal = [yearVal -1, month_d-1, day_d-1];
			}
		},
		methods: {
			close() {
				this.$refs.popup.close()
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			confirm() {
				console.log(this.year +'-'+ this.month +'-'+ this.day)
				this.close();
				this.$emit('confirm', {
					data: this.year +'-'+ this.month +'-'+ this.day
				})
			},
			// 第四版（立即执行，停止触发 n 秒后，才可以重新触发执行。反过来）
			debounce4(fn, wait, immediate) {
			    let timer;
			    return function () {
			        if (timer) clearTimeout(timer);
			        if (immediate) {
			            // 如果已经执行过，不再执行
			            var callNow = !timer;
			            timer = setTimeout(() => {
			                timer = null;
			            }, wait)
			            if (callNow) {
			                fn.apply(this, arguments)
			            }
			        } else {
			            timer = setTimeout(() => {
			                fn.apply(this, arguments)
			            }, wait);
			        }
			    }
			},
			/* 重新赋值 */
			resetDate() {
				console.log("执行了")
				let days = [];
				let dayNum = new Date(this.year,this.month, 0).getDate()
				for (let i = 1; i <= dayNum; i++) {
					days.push(i)
				}
				this.days = days;
			},
			bindChange(e) {
				const val = e.detail.value
				this.chekcVal = val;
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.debounce4(this.resetDate(),500)
			}
		}
	}
</script>

<style lang="scss">
	.time_warp {
		margin: 0 auto;
		width: 650rpx;
		height: 416rpx;
		padding: 0 85rpx;
		box-sizing: border-box;
		background: #28243D;
		border-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-bottom: 20rpx;

		.top {
			height: 100rpx;
			width: 100%;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;

			.cancel {
				color: #F1EDFF;
			}

			.title {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F1EDFF;
			}

			.confirm {
				color: #3DFFF2;
			}
		}
	}

	.picker-view {
		width: 100%;
		height: 280rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.picker-view {
		color: #7A7789;
	}

	/deep/.uni-picker-view-wrapper {
		color: #7A7789;
	}

	/deep/.picker_com {
		width: 100%;
		height: 96rpx;
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
		
		&::after{
			display: none;
		}
		&::before {
			display: none;
		}
	}

	/deep/.mask_com {
		border: none;
		height: 100%;
		margin: 0 auto;
		background: linear-gradient(
		180deg,hsla(0,0,0,0.1),hsla(0,0,0,0.1)),linear-gradient(
		0deg,hsla(0,0,0,0.1),rgba(0,0,0,0.2));
		background-position: top, bottom;
		background-size: 100% 102px;
		background-repeat: no-repeat;
		background: none;
		/* background: rgba(0,0,0,0.2); */
		//     background: linear-gradient(
		// 180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(
		// 0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
		// color: #FFFFFF;

		.item {
			color: #FFFFFF !important;
		}
	}

	/deep/.uni-picker-view-indicator:after,
	/deep/.uni-picker-view-indicator:before {
		display: none !important;
	}
	
	.pickerSelected{
	    color: #FFFFFF;
	}
</style>
